<template>
  <div class="flex items-center justify-between mt-[30px] mb-[20px]">
    <div class="flex items-center">
      <div class="w-[4px] h-[12px] bg-[#EF6800]"></div>
      <div class="ml-[10px] text-[#EF6800] font-bold">申请发票</div>
    </div>
  </div>

  <el-form
    label-width="7vw"
    :model="form"
    ref="formRef"
    :inline="false"
    label-position="left"
  >
    <el-form-item label="发票类型">
      <div class="flex" style="width: 318px">
        <el-select v-model="form.invoice_type" :disabled="disabled">
          <el-option
            @click="clickOption(keys)"
            v-for="(item, keys) in optionsData"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </div>
    </el-form-item>
    <el-form-item label="纳税人名称" v-if="form.invoice_type">
      <el-input
        v-model="form.invoice_name"
        :disabled="disabled"
        style="width: 318px"
      ></el-input>
    </el-form-item>
    <el-form-item label="纳税人识别号" v-if="form.invoice_type">
      <el-input
        v-model="form.invoice_no"
        :disabled="disabled"
        style="width: 318px"
      ></el-input>
    </el-form-item>
    <el-form-item label="税务登记号码" v-if="form.invoice_type == 1">
      <el-input
        v-model="form.invoice_mobile"
        :disabled="disabled"
        style="width: 318px"
      ></el-input>
    </el-form-item>
    <el-form-item label="税务开户银行名称" v-if="form.invoice_type == 1">
      <el-input
        v-model="form.invoice_bank"
        :disabled="disabled"
        style="width: 318px"
      ></el-input>
    </el-form-item>
    <el-form-item label="税务开户银行账号" v-if="form.invoice_type == 1">
      <el-input
        v-model="form.invoice_bank_no"
        :disabled="disabled"
        style="width: 318px"
      ></el-input>
    </el-form-item>
    <el-form-item label="税务登记地址" v-if="form.invoice_type == 1">
      <el-input
        v-model="form.invoice_address"
        :disabled="disabled"
        style="width: 318px"
      ></el-input>
    </el-form-item>
    <el-form-item label="姓名" v-if="form.invoice_type">
      <el-input v-model="form.name" :disabled="disabled" style="width: 318px"></el-input>
    </el-form-item>
    <el-form-item label="手机号" v-if="form.invoice_type">
      <el-input
        v-model="form.mobile"
        :disabled="disabled"
        style="width: 318px"
      ></el-input>
    </el-form-item>
    <el-form-item label="详细地址" v-if="form.invoice_type">
      <el-input
        v-model="form.address"
        :disabled="disabled"
        style="width: 318px"
      ></el-input>
    </el-form-item>
    <el-form-item label="发票电子邮箱" v-if="form.invoice_type">
      <el-input
        v-model="form.invoice_email"
        :disabled="disabled"
        style="width: 318px"
      ></el-input>
    </el-form-item>
  </el-form>
</template>
<script setup lang="ts">
import { ref, reactive, defineExpose, defineProps } from "vue";
const props = defineProps({
  form: {} as any,
  disabled: { type: Boolean, default: false },
});
const type = ref("");
const optionsData = ref([
  {
    label: "不申请发票",
    value: 0,
  },
  {
    label: "申请专票",
    value: 1,
  },
  {
    label: "申请普票",
    value: 2,
  },
]);
const clickOption = (index: number) => {
  console.log(index);
  // props.form.invoice_type = index;
  // type.value = optionsData.value[index].label;
};
</script>
